import { Button, Input } from "antd";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { CardCom } from "../components/scrollCom";
import { useState } from "react";
import "./index.css";
//AI智能体
const IntelligentAgent = () => {
  const [cardIndex, setCardIndex] = useState(0);
  const cardList = ["我的", "学习", "创作", "绘画", "生活"];
  return (
    <>
      <div className=" flex justify-between items-center">
        <div className=" text-base font-bold text-white">发现AI智能体</div>
        <Button shape="round" type="primary" icon={<PlusOutlined />}>
          创建AI智能体
        </Button>
      </div>
      <div className=" flex justify-between items-center mt-4">
        <div className="flex gap-x-2 ">
          {cardList.map((item, index) => {
            return (
              <div key={index} onClick={() => setCardIndex(index)}>
                <CardCom item={item} index={index} cardIndex={cardIndex} />
              </div>
            );
          })}
        </div>
        <Input
          size="large"
          placeholder="large size"
          className="w-1/3 h-8 rounded-full bg-transparent border border-gray-black text-white custom-input"
          prefix={<SearchOutlined />}
          style={{
            backgroundColor: "transparent",
            borderColor: "#666",
          }}
        />
      </div>
      <div className="mt-4 flex flex-wrap gap-x-2 gap-y-5 box-border">
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
        <div className="p-2 w-w-minus-8 rounded-lg border border-gray-black flex">
          <div className="w-11 h-11 rounded-full bg-white"></div>
          <div className="ml-2 text-re-black">
            <div className=" text-base font-bold text-white">提示词专家</div>
            <div className=" text-xs mt-1">
              零门槛成为提示词大师，更好地向 Kimi 提问
            </div>
            <div className=" text-xs mt-1">来自Kimi x LangGPT</div>
          </div>
        </div>
      </div>
    </>
  );
};
export default IntelligentAgent;
